<template>
    <view class="app-container goods">
        <z-paging ref="paging" v-model="list" @query="queryList">
            <view class="goods-list">
                <view class="goods-item" v-for="item in list" :key="item.id">
                    <view class="box flexrow" @tap="linkto(`/pages/goods/info?id=${item.goodsId}`)">
                        <view class="imgbox">
                            <image class="img" :src="item.pictureOssPath" mode="aspectFill"></image>
                            <text class="tag" v-if="item.isDisabled">已停用</text>
                            <text class="tag success" v-else>已启用</text>
                        </view>
                        <view class="text">
                            <text class="name">{{ item.goodsName }}</text>
                            <text class="txt">规格：{{ item.spec }}</text>
                            <text class="txt">库存：{{ item.stock }}</text>
                        </view>
                    </view>
                    <view class="bottom flexrow">
                        <text class="btn" @tap="openPop(item)">增减库存</text>
                        <text class="fill"></text>
                        <text class="btn" @tap="linkto(`/pages/goods/edit?id=${item.goodsId}`)">编辑</text>
                        <text class="btn error" v-if="!item.isDisabled" @tap="setGoods(item)">停用</text>
                        <text class="btn success" v-else @tap="setGoods(item)">启用</text>
                    </view>
                </view>
            </view>
            <template #bottom>
                <view class="goods-zw">
                    <up-gap height="50"></up-gap>
                </view>
            </template>
        </z-paging>
        <view class="goods-add flexrow" @tap="linkto('/pages/goods/edit')">
            <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
        </view>
        <up-popup :show="show" @close="show = false">
            <view class="goods-popup">
                <view class="top">
                    <text class="tit">增减商品库存</text>
                </view>
                <view class="mid">
                    <text class="txt">{{ goods.goodsName }}</text>
                </view>
                <view class="mid">
                    <input class="input" type="number" v-model="stock" placeholder="请输入商品库存"></input>
                </view>
                <view class="mid">
                    <text class="tip">负数可以减少库存数量,正整数则增加库存</text>
                </view>
                <view class="btn">
                    <up-button text="提交" type="primary" :loading="loading" @click="setStock"></up-button>
                </view>
            </view>
        </up-popup>
        <zzk-tabbar :index="1"></zzk-tabbar>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { goodsList, goodsDisabled, setGoodsStock } from '@/api/goods.js'
import { linkto, showToast } from '@/utils/util'

const paging = ref(null)
const list = ref([])

const show = ref(false)
const goods = ref({})
const stock = ref('')
const loading = ref(false)

onLoad(() => {
    uni.hideTabBar()
    uni.$on('refresh_goods', () => {
        paging.value.reload()
    })
})

onUnload(() => {
    uni.$off('refresh_goods')
})

const queryList = (pageNo, pageSize) => {
    const params = {
        page: pageNo,
        size: pageSize,
    }
    goodsList(params).then(res => {
        paging.value.complete(res.records)
    })
}

const setGoods = (item) => {
    const data = {
        id: item.goodsId,
        disabled: item.isDisabled ? 0 : 1
    }
    uni.showLoading()
    goodsDisabled(data).then(res => {
        uni.hideLoading()
        showToast('设置成功')
        paging.value.reload()
    }).catch(e => {
        uni.hideLoading()
    })
}

const openPop = (item) => {
    goods.value = item
    stock.value = ''
    show.value = true
}

const setStock = () => {
    const reg = /^-?(0*[1-9]\d*)$/
    if (!stock.value || !reg.test(stock.value)) {
        showToast('请输入正确的库存')
        return false
    }
    loading.value = true
    setGoodsStock({ id: goods.value.goodsId, quantity: stock.value }).then(res => {
        loading.value = false
        show.value = false
        paging.value.reload()
        showToast('设置成功')
    }).catch(e => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.goods {
    &-tabs {
        background-color: #fff;
    }
    &-list {
        padding: 20rpx $zzk-margin 0;
    }
    &-item {
        padding: 24rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        align-items: center;
        .imgbox {
            position: relative;
        }
        .tag {
            position: absolute;
            padding: 0 8rpx;
            font-size: 20rpx;
            line-height: 40rpx;
            border-top-left-radius: 8rpx;
            border-bottom-right-radius: 8rpx;
            background-color: $u-error;
            color: #fff;
            top: 0;
            left: 0;
            &.success {
                background-color: $u-success;
            }
        }
        .img {
            width: 160rpx;
            height: 160rpx;
            display: block;
            border-radius: 8rpx;
        }
        .text {
            flex: 1;
            padding-left: 20rpx;
        }
        .name {
            font-size: 28rpx;
            line-height: 40rpx;
        }
        .txt {
            font-size: 24rpx;
            color: #999;
            line-height: 40rpx;
        }
        .bottom {
            padding-top: 16rpx;
        }
        .fill {
            flex: 1;
        }
        .btn {
            background-color: $u-primary-light;
            font-size: 24rpx;
            line-height: 44rpx;
            border: $u-primary 2rpx solid;
            border-radius: 8rpx;
            margin-left: 16rpx;
            width: 144rpx;
            text-align: center;
            color: $u-primary;
            &:first-child {
                margin-left: 0;
            }
            &.error {
                background-color: $u-error-light;
                color: $u-error;
                border-color: $u-error;
            }
            &.success {
                background-color: $u-success-light;
                color: $u-success;
                border-color: $u-success;
            }
        }
    }
    &-add {
        position: fixed;
        width: 72rpx;
        height: 72rpx;
        background-color: $u-error;
        box-shadow: rgba(0, 0, 0, 0.1) 0 0 16rpx 4rpx;
        right: 24rpx;
        bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
        bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        z-index: 99;
    }
    &-popup {
        padding: 0 $zzk-margin;
        .tit {
            font-size: 28rpx;
            line-height: 96rpx;
            text-align: center;
            font-weight: 700;
        }
        .txt {
            font-size: 28rpx;
            line-height: 80rpx;
        }
        .input {
            width: 100%;
            background-color: #f5f5f5;
            height: 80rpx;
            font-size: 28rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            padding-left: 20rpx;
        }
        .btn {
            padding: 80rpx 0 20rpx;
        }
        .tip {
            font-size: 24rpx;
            color: $u-error;
            line-height: 40rpx;
            padding-top: 16rpx;
        }
    }
    &-zw {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>